﻿@model ECMS.AppService.Model.Models.MenuModel
@{
    Layout = null;
}
<div class="layui-body-header">
    <ul class="kit-breadcrumb">
        <li class="kit-item">
            <a href="#/">
                <i class="layui-icon">&#xe68e;</i>
                <span>首页</span>
            </a>
        </li>
        <li class="kit-separator">
            <i class="layui-icon">&#xe602;</i>
        </li>
        <li class="kit-item">
            <a href="#/menu/list">
                <i class="layui-icon">&#xe658;</i>
                <span>菜单管理</span>
            </a>
        </li>
        <li class="kit-separator">
            <i class="layui-icon">&#xe602;</i>
        </li>
        <li class="kit-item">
            <a>
                <span>新增菜单</span>
            </a>
        </li>
    </ul>
</div>
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <a href="javascript:history.back(-1);" title="返回"><i class="layui-icon">&#xe65c;</i></a>
                    @{
                        var showName = Model.Id == 0 ? "新增" : "编辑";
                    }
                    <span>@showName</span>
                </div>
                <div class="layui-card-body">
                    <form class="layui-form" action="">
                        <input type="hidden" name="id" value="@Model.Id" />
                        <input type="hidden" name="guid" value="@Model.Guid" />
                        @Html.AntiForgeryToken()
                        <div class="layui-form-item">
                            <label class="layui-form-label">上级菜单</label>
                            <div class="layui-input-block">
                                <a href="javascript:;" class="layui-btn layui-btn-primary" id="selected_hash">选择菜单</a>
                                <input type="hidden" name="pid" value="@Model.Pid" />
                                <span id="pid_name_hash"></span>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">菜单名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" required lay-verify="required" value="@Model.Title" placeholder="请输入名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">路径</label>
                            <div class="layui-input-block">
                                <input type="text" name="path" required lay-verify="required" value="@Model.Path" placeholder="请输入访问路径" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">图标</label>
                            <div class="layui-input-block">
                                <input type="text" name="icon" required lay-verify="required" value="@Model.Icon" placeholder="请输入图标编码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">是否展开</label>
                            <div class="layui-input-inline">
                                @{ 
                                    var hasChecked = Model.Open ? "checked" : "";
                                }
                                <input type="checkbox" name="open" lay-skin="switch" value="true" lay-text="ON|OFF" @hasChecked />
                            </div>
                            <div class="layui-form-mid layui-word-aux">该值只对拥有子菜单的菜单有效</div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">备注</label>
                            <div class="layui-input-block">
                                <textarea name="remark" placeholder="请输入内容" class="layui-textarea">@Model.Remark</textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="selector_menu_tpl_hash">

    <div class="layui-card">
        <div class="layui-card-body">
            <table id="selector_menu_hash" lay-filter="selector_menu_filter_hash"></table>
        </div>
    </div>
</script>
<script type="text/html" id="selector_menu_bar_hash">
    <a class="layui-btn layui-btn-xs" lay-event="selected">选择</a>
</script>

<!-- 脚本 -->
<script>
    layui.use(['form', 'axios','table'], function () {
        var form = layui.form,
            axios = layui.axios,
            layer = layui.layer,
            $ = layui.jquery,
            table = layui.table;
        form.render();

        $('#selected_hash').on('click', function () {
            layer.open({
                title:'选择上级菜单',
                type: 1,
                content: $('#selector_menu_tpl_hash').html(),
                area: ['800px', '600px'],
                success: function (layero, index) {
                    table.render({
                        method: 'post',
                        done: function () {
                            $('#selector_menu_hash').next().css('height', 'auto');
                        },
                        request: {
                            pageName: 'pageIndex', //页码的参数名称，默认：page
                            limitName: 'pageSize' //每页数据量的参数名，默认：limit
                        },
                        limit: 10,
                        elem: '#selector_menu_hash',
                        height: 500,
                        url: '/Menu/GetPages', //数据接口
                        page: true, //开启分页
                        cols: [
                            [ //表头
                                {
                                    field: 'id',
                                    title: 'ID',
                                    width: 60,
                                    sort: true,
                                    fixed: 'left'
                                }, {
                                    field: 'title',
                                    title: '名称',
                                    width: 100
                                }, {
                                    field: 'path',
                                    title: '地址',
                                    width: 100
                                }, {
                                    field: 'icon',
                                    title: '图标',
                                    width: 100,
                                    templet: '<div><i class="layui-icon">{{d.icon}}</i></div>'
                                }, {
                                    field: 'open',
                                    title: '是否展开',
                                    width: 100
                                }, {
                                    field: 'remark',
                                    title: '备注',
                                    width: 200
                                }, {
                                    title: '操作',
                                    // fixed: 'right',
                                    width: 100,
                                    align: 'center',
                                    toolbar: '#selector_menu_bar_hash'
                                }
                            ]
                        ]
                    });

                    table.on('tool(selector_menu_filter_hash)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                        var data = obj.data; //获得当前行数据
                        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                        var tr = obj.tr; //获得当前行 tr 的DOM对象

                        console.log(layEvent);
                        if (layEvent === 'selected') {
                            $('input[name=pid]').val(data.id);
                            $('#pid_name_hash').html(data.title);
                            layer.close(index);
                        }
                    });
                }
            });
        });

        //监听提交
        form.on('submit(formDemo)', function (data) {
            var layIndex = layer.load(2, {
                shade: [0.2, '#393D49']
            });
            console.log(data);
            axios.post('/Menu/Save', data.field)
                .then(function (response) {
                    if (response.status === 500) {
                        console.log(response);
                        throw new Error(response.statusText);
                    }
                    return response.data;
                })
                .then(function (res) {
                    layer.msg(res.message);
                    layer.close(layIndex);
                    if (res.success) {
                        location.href = "#/menu/list";
                    }
                })
                .catch(function (err) {
                    console.log(err);
                    layer.close(layIndex);
                });

            return false;
        });
    });
</script>
<!-- 样式 -->
<style scoped>
</style>
